<template>
  <div class="aside_box">
    <el-card class="box_card">
      <div class="name_box">
        <span> 小豪前端 </span>
        <span>浮舟沧海 · 立马昆仑</span>
      </div>

      <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="cadetblue">
        <el-menu-item index="2" @click="toPage('Home')">
          <el-icon><icon-menu /></el-icon>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="3" @click="toPage('BlogClassfiy')">
          <el-icon>
            <document />
          </el-icon>
          <span slot="title">分类</span>
          <el-tag class="ml-2" type="info" effect="Plain" v-if="classListLength !== 0">{{ classListLength }}</el-tag>
        </el-menu-item>
        <el-menu-item index="4" @click="toPage('About')">
          <el-icon>
            <setting />
          </el-icon>
          <span slot="title">关于</span>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script setup lang="ts" >
import { GetArtiCates } from "@/api/blogClassfiy";
import {
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

onMounted(() => {
  getArtiCates()
})

const classListLength = ref(0);
interface Data {
  code?: number,
  data: [],
  msg?: string
}
const getArtiCates = async () => {
  const { code, data }: Data = await GetArtiCates();
  try {
    if (code === 200) {
      classListLength.value = data.length;
    }
  } catch (error) {
    console.log(error);
  }
}

const router = useRouter();
const toPage = (name: string) => {
  router.push({ path: `/${name}` });
}
</script>

<style lang="less" scoped>
@import url(@/assets/css/globalColor.less);
.aside_box {
  height: auto;
  display: flex;
  justify-content: flex-end;
  background-color: #f0f8ff;

  :deep(.el-card__body) {
    padding: 0 !important;
  }

  .box_card {
    position: fixed;
    height: 300px;
    width: 240px;
    margin: 0 10px;
    border-radius: 15px;

    .name_box {
      height: 100px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: @theme-color;

      span {
        color: white;
        font-size: 25px;
        //   font-weight: 600;
      }

      span:nth-child(2) {
        font-size: 14px;
        margin-top: 10px;
      }
    }

    .el-menu {
      border: 0;
      margin-top: 20px;
    }

    .el-menu-item,
    .el-submenu__title {
      height: 45px;
      line-height: 45px;
      font-size: 13px;
    }

    .el-tag.el-tag--info {
      position: absolute;
      right: 25px;
    }
  }
}
</style>